<template>
  <div class="p-[20px]">
    <div class="text-center text-[24px] mb-[30px]">商品列表</div>
    <div class="w-[330px] mb-[30px]">
      <a-input-search
        class="w-[330px]"
        v-model="searchValue"
        placeholder="搜索商品名"
        @clear="handleSearch"
        @search="handleSearch"
        allow-clear
      >
      </a-input-search>
    </div>
    <div>
      <a-button @click="delshopfun()" class="mb-[30px] mr-[30px]" type="primary"
        >批量删除</a-button
      >
      <a-button class="mb-[30px]" type="primary" @click="addshopItem">添加商品</a-button>
    </div>
    <el-table
      current-row-key="id"
      @selection-change="handleSelectionChange"
      :data="shopList"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="shopname" label="商品" />
      <el-table-column prop="price" label="价格" />
      <el-table-column label="图片">
        <template #default="{ row }">
          <img class="w-[30px] h-[30px]" :src="row.imgurl" alt="" srcset="" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <a-button type="text" class="mr-[12px]" @click="delshopItem(row.id)"
            >删除</a-button
          >
          <a-button type="text" @click="editshopItem(row.id)">编辑</a-button>
          <a-button type="text" @click="gotodetail(row.id)">详情</a-button>
        </template>
      </el-table-column>
    </el-table>
    <Editshop
      v-if="editshow"
      v-model:visible="editshow"
      :shopId="shopId"
      @close="editshow = false"
      @getList="getList"
      :operation="operation"
    ></Editshop>
    <ShopDetail
      :shopId="shopId"
      v-if="detailshow"
      v-model:visible="detailshow"
    ></ShopDetail>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { delshop, getshopList } from "@/api/shop";
import Editshop from "./component/edit.vue";
import { Message } from "@arco-design/web-vue";
import ShopDetail from "./component/shopdetail.vue";
interface shopType {
  shopname: string;
  price: number;
  id?: number;
}
const delIds = ref<number[]>([]);
const operation = ref("");
const searchValue = ref();
const shopList = ref<shopType[]>([]);
const shopId = ref<number>(1);
const editshow = ref<boolean>(false);
const detailshow = ref<boolean>(false);

const getList = async () => {
  let res = await getshopList({
    searchName: searchValue.value,
  });
  if (res.code == 200) {
    shopList.value = res.data;
  }
};
const delshopItem = async (id: number) => {
  try {
    let res = await delshop({ ids: [id] });
    if (res.code == 200) {
      Message.success("删除成功");
      getList();
    } else {
      Message.error("删除失败");
    }
  } catch (error) {
    console.error(error);
  }
};
const editshopItem = (id: number) => {
  shopId.value = id;
  operation.value = "edit";
  editshow.value = true;
};
const addshopItem = () => {
  operation.value = "add";
  editshow.value = true;
};
const delshopfun = async () => {
  try {
    let res = await delshop({ ids: delIds.value });
    if (res.code == 200) {
      Message.success("删除成功");
      getList();
    } else {
      Message.error("删除失败");
    }
  } catch (error) {
    console.error(error);
  }
};
const gotodetail = async (id: number) => {
  shopId.value = id;
  detailshow.value = true;
};
const handleSearch = () => {
  getList();
};
const handleSelectionChange = (el: any) => {
  el.map((el: { id: number }) => {
    delIds.value.push(el.id);
  });
};
getList();
</script>

<style lang="less" scoped></style>
